<template>
  <div class="view">
    <ConditionFilter ref="Filter" @openFilter="openFilter" @confirm="search" />
    <div class="action">
      <!-- <u-divider></u-divider> -->
      <!-- <u-button class="create" @click="toCreate" iconColor="#fff" icon="plus-circle">创建活动</u-button> -->
    </div>
    <scroll-view :scroll-top="scrolltTop" scroll-y="true" style="height: calc(100vh - 256rpx);" @scrolltolower="getMore">
      <div class="content" v-if="list.data.length>0">
        <u-divider></u-divider>
        <div v-for="item in list.data" @click="toDetail(item.id)">
          <div class="item">
            <div class="left">
              <XPicture class="img" :url="fileUrl(item.img)" />
              <!-- <image class="img" src="../../../static/card/readCardBG.png" /> -->
              <div class="status" :class="getStatus(item.is_play).class">{{getStatus(item.is_play).text}}</div>
            </div>
            <div class="right">
              <div class="title">{{item.title}}</div>
              <div class="time">{{item.start_time}} ~ {{item.end_time}}</div>
              <div class="info">{{item.contacts? `${item.contacts}|`:''}}{{item.tel? `${item.tel}|`:''}}{{item.address}}</div>
              <div class="row">
                <div class="tag">
                  <div class="tag_item type_name" v-if="item.type_name">{{item.type_name}}</div>
                  <div class="tag_item" v-if="item.type_tag.length">
                    <div class="tgs" v-for="i in item.type_tag">{{i}}</div>
                  </div>
                  <div class="tag_item type_number">{{item.number||'不限'}}</div>
                  <div class="tag_item is_recom">未推荐</div>
                </div>
                <div class="detail">详情>></div>
              </div>
            </div>
          </div>
          <u-divider></u-divider>
        </div>
        <u-loadmore :status="list.last_page>=list.page?'loading':'nomore'" />
      </div>
      <div v-else>
        <XNothing />
      </div>
    </scroll-view>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { navigate } from "@/util/navigate";
import { catchException, request } from "@/util/request";
import { fileUrl } from "@/util/util";
import store from "@/store/store";
import { onLoad, onShow } from "@dcloudio/uni-app";
const { statusState } = store
const keyword = ref('')
const dataList = [1, 2, 3]
const Filter = ref()

function init() {
  getList()
  getTypeFilter()
}
// 获取活动类型
function getTypeFilter() {
  request({ url: 'adminMobile/activityType/filterList', method: 'get' }).then(res => {
    list.typeFilterList = res.content.map(item => {
      return {
        label: item.type_name,
        value: item.id
      }
    })
  }).catch(e => catchException(e))
}
// 打开筛选窗口
function openFilter() {
  Filter.value.open({
    top: 120,
    filterList: [{
      type: 'radio',
      label: '活动类型',
      param: 'type_id',
      options: [{ label: '全部', value: '' }].concat(list.typeFilterList)
    }, {
      type: 'radio',
      label: '是否推荐',
      param: 'reco',
      options: [{ label: '全部', value: '' }, { label: '是', value: '1' }, { label: '否', value: '2' }]
    }, {
      type: 'radio',
      label: '是否发布',
      param: 'is_play',
      options: [{ label: '全部', value: '' }, { label: '是', value: '1' }, { label: '否', value: '2' }]
    }, {
      type: 'radio',
      label: '是否需要报名',
      param: 'is_apply',
      options: [{ label: '全部', value: '' }, { label: '是', value: '1' }, { label: '否', value: '2' }]
    }, {
      type: 'time',
      label: '活动时间',
      param1: 'start_time',
      param2: 'end_time'
    }]
  })
}
// 创建
function toCreate() {
  navigate({ url: '/pages/activity/activityList/create/create' })
}
// 详情
function toDetail(id) {
  navigate({ url: '/pages/activity/activityList/detail', query: { id: id } })
}
// 列表相关变量定义
const list = reactive({
  data: [],
  query: {},
  last_page: 10,
  page: 1,
  limit: 10,
  typeFilterList: []
})
// 搜索
function search(val) {
  list.page = 1
  list.query = val
  getList()
}
// 下一页
function getMore() {
  list.page += 1
  getList()
}
// 获取列表
function getList() {
  if (list.page > list.last_page) {
    return
  }
  request({
    url: 'adminMobile/activity/list',
    method: 'get',
    data: { page: list.page, limit: 10, ...list.query }
  }).then(res => {
    if (list.page == 1) {
      list.data = res.content.data
      list.last_page = res.content.last_page
    } else {
      list.data = list.data.concat(res.content.data)
    }
  }).catch(e => {
    if (list.page == 1) {
      list.data = []
    }
    catchException(e)
  })
}

function getStatus(is_play) {
  return statusState.activityStatus.is_play[is_play]
}

init()
uni.$on('refreshPreviousPage', (opt) => {
  if (opt.data.refresh) {
    init()
  }
})
</script>

<style lang="scss" scoped>
.view {
  padding: 30rpx 0;
}
.search {
  padding: 0 30rpx;
  display: flex;
  gap: 40rpx;

  .filter {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.action {
  margin-bottom: 10rpx;
  .u-divider {
    margin: 10rpx 0;
  }
  .create {
    width: 210rpx;
    height: 64rpx;
    background: #468eff;
    border-radius: 16rpx;
    margin: unset !important;
    margin-left: 30rpx !important;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }
}
.content {
  .u-divider {
    margin: 0rpx 0;
  }
  .item {
    padding: 20rpx 30rpx;

    min-height: 188rpx;
    display: flex;
    gap: 20rpx;
    box-sizing: border-box;
    .left {
      position: relative;
      .img {
        width: 148rpx;
        height: 148rpx;
        background: rgba(0, 0, 0, 0);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
      .status {
        width: 96rpx;
        height: 32rpx;
        // background: #4da66d;
        border-radius: 16rpx 0rpx 16rpx 0rpx;
        position: absolute;
        left: 0;
        top: 0;

        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #333333;
      }
      .time {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
      }
      .info {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;
      }
      .row {
        display: flex;
        justify-content: space-between;

        .tag {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          .tag_item {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            padding: 2rpx 8rpx;
            border-radius: 4rpx;
            display: flex;
            align-items: center;
            .tgs {
              padding: 2rpx 8rpx;
              color: #fea711;
              background: rgba(254, 167, 17, 0.15);
              border-radius: 4px;
            }
          }
          .type_name {
            color: #fea711;
            background: rgba(254, 167, 17, 0.15);
          }
          .type_number {
            color: #468eff;
            background: rgba(70, 142, 255, 0.15);
          }
          .is_recom {
            color: #999999;
            background: rgba(153, 153, 153, 0.15);
          }
        }
        .detail {
          font-size: 24rpx;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
          text-decoration: underline;
          text-align: center;
          color: #468eff;
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>